<template>
	<div id="page" style="overflow-y: auto;overflow-x:hidden ;">
		<div id="mainWorkformContainer" class="wf-box-in FormViewContainer" style="position: relative;">
			<div class="wf-form" id="workflowInstanceBaseInfo">
				<div class="wf-box-tit" onclick="toggleWorkflowFormDiv('workflow-base-info')">
					<i class="fa fa-file-o cur ml10"></i>查看流程信息
					<span href="javascript:void(0)" class="wf-arrows"></span>
				</div>
				<!--流程基础信息-->
				<div class="p2 workflow_base_info" id="workflow-base-info" style="display: none;">
					<table cellpadding="0" cellspacing="0" border="0" width="100%">
						<tr>
							<th style="width: 100px;"><em>*</em>工单标题：</th>
							<td class="p3">
								<el-input id="WorkflowTitle" :disabled="workflowTitleIsDisabled" size="small"
									v-model="wfContext.WorkflowTitle" placeholder="工单标题" width="95%"></el-input>
							</td>
						</tr>
						<!-- <tr>
							<th>流程单号：</th>
							<td class="pl3">
								<span v-html="pageBaseInfo.sheetId"></span>
							</td>
						</tr> -->
						<tr>
							<th>当前节点：</th>
							<td class="pl3">
								<span v-html="pageBaseInfo.currentActivityName"></span>
							</td>
						</tr>
						<tr>
							<th>流程状态：</th>
							<td class="pl3" v-html="pageBaseInfo.workflowState"> </td>
						</tr>
						<tr>
							<th>提单人：</th>
							<td class="pl3">
								<span v-html="pageBaseInfo.creator"></span>
							</td>
						</tr>
						<tr>
							<th>发起时间：</th>
							<td class="pl3">
								<span v-html="pageBaseInfo.startTime"></span>
							</td>
						</tr>
						<tr>
							<th>结束时间：</th>
							<td class="pl3">
								<span v-html="pageBaseInfo.finishedTime"></span>
							</td>
						</tr>
					</table>
				</div>

			</div>
			<div class="space" style="height: 0;"></div>
			<div id="formDetail">
				<!--Url表单-->
				<iframe v-if="wfContext.FormType == 'UrlForm'" id="urlFormIframe" :src="urlForm.url" width="100%"
					:height="windowHeight" frameborder="0" />
				<!--在线表单-->
				<el-form v-if="wfContext.FormType == 'OnlineForm'" ref="formRef" :rules="formRules" size="small"
					:model="data" class="f2bpm-workform" label-position="top">
					<div :id="row.id" :ordernum="row.orderNum" class="drag-row drag-box"
						v-for="(row, row_index) in fields">
						<div class="view">
							<div v-show="row.showLabel" class="form-section-title" :style="row.sectionStyle">
								{{row.label}} <span v-if="row.collapse!==0&&row.collapse!==undefined"
									@click="onRowCollapseClick(row)" :class="rowCollapseIcon(row)"></span>
							</div>
							<el-row class="row-fluid clearfix" rowdetail="row.id" v-show="!row.collapse"
								:style="row.style" :gutter="row.gutter">
								<el-col :id="col.id" :rowId="row.id" :style="col.style" class="column" :span="col.span"
									v-for="(col, col_index) in row.children" :key="col_index">
									<div :id="field.id" :fieldId="field.fieldId" :orderNum="field.orderNum"
										:ctrType="field.ctrType" class="online-form-item component"
										v-for="(field, field_index) in col.children" :key="field_index">
										<el-form-item :label-width="field.labelWidth" v-show="field._isShowPower">
											<span slot="label" :style="field.style"
												v-show="field.showLabel&&field.ctrType!='hidden'&&field.ctrType!='extend_table'">
												<span v-html="field.label"></span>
												<span v-if="field.helperArticle!=''&&field.helperArticle!=undefined"
													@click='openHelperArticle(field.helperArticle)'
													class="fa fa-question-circle-o" title="点击查看说明"></span>
												<em class="red" v-if="field._isRequired">*</em>{{field.labelSuffix}}
											</span>
											<f2bpm-onlineformitem
												v-if="!field.isContainer&&field.ctrType!='extend_tabs'&&field.ctrType!='extend_container'"
												:parentdata="data" :field="field" :fieldvalue="data[field.vModel]"
												@rendercomponent="renderComponent" @updatevalue="updateFieldValue"
												@appendfieldvalue="appendFieldValue">
											</f2bpm-onlineformitem>
											<el-tabs v-else-if="field.ctrType=='extend_tabs'" @tab-click="tabsClick"
												:value="field.tabSelected" :tab-position="field.tabPosition"
												:type="field.tabType">
												<el-tab-pane v-for="tab in field.children" :label="tab.label"
													class="container" :rowid="row.id" :colid="col.id"
													:ordernum="tab.orderNum" :container_id="field.id"
													:subcontainer_id="tab.id" :tabsid="field.id" :tabid="tab.id"
													:name="tab.label">
													<div :id="_row.id" :parent_rowid="row.id" :parent_colid="col.id"
														:container_id="field.id" :subcontainer_id="tab.id"
														:ordernum="_row.orderNum" class="drag-row drag-box"
														v-for="_row  in tab.children" :key="_row.orderNum">
														<div class="view">
															<div v-show="_row.showLabel" class="form-section-title"
																:style="_row.sectionStyle">
																{{_row.label}} <span  v-if="_row.collapse!==0&&_row.collapse!==undefined" @click="onRowCollapseClick(_row)" :class="rowCollapseIcon(_row)"></span>

															</div>
															<el-row class="row-fluid clearfix"  rowdetail="_row.id"  v-show="!_row.collapse"  :style="_row.style"
																:gutter="_row.gutter">
																<el-col :parent_rowid="row.id" :parent_colid="col.id"
																	:container_id="field.id" :subcontainer_id="tab.id"
																	:rowId="_row.id" :id="_col.id" :style="_col.style"
																	class="column container_column" :span="_col.span"
																	v-for="(_col, _col_index) in _row.children"
																	:key="_col_index">
																	<div class="online-form-item component"
																		:id="_field.id" :fieldId="_field.fieldId"
																		:parent_rowid="row.id" :parent_colid="col.id"
																		:container_id="field.id"
																		:subcontainer_id="tab.id" :colId="_col.id"
																		:rowId="_row.id" :vmodel="_field.vModel"
																		:orderNum="_field.orderNum"
																		:ctrType="_field.ctrType"
																		v-for="(_field, _field_index) in _col.children"
																		:key="_field_index">
																		<el-form-item
																			:label-width="_field.labelWidth?_field.labelWidth:'90px'"
																			v-show="_field._isShowPower">
																			<span slot="label" :style="_field.style"
																				v-show="_field.showLabel">
																				<span v-html="_field.label"></span> <em
																					class="red"
																					v-if="_field._isRequired">*</em>{{field.labelSuffix}}
																			</span>
																			<f2bpm-onlineformitem
																				v-if="!_field.isContainer&&_field.ctrType!='extend_tabs'&&_field.ctrType!='extend_container'"
																				:parentdata="data" :field="_field"
																				:fieldvalue="data[_field.vModel]"
																				@rendercomponent="renderComponent"
																				@updatevalue="updateFieldValue"
																				@appendfieldvalue="appendFieldValue">
																			</f2bpm-onlineformitem>
																		</el-form-item>
																	</div>
																</el-col>
															</el-row>
														</div>
													</div>
												</el-tab-pane>
											</el-tabs>
											<el-container v-else-if="field.ctrType=='extend_container'">
												<div v-for="tab in field.children"
													:class="'f2bpm-'+tab.tag+' container'" :rowid="row.id"
													:colid="col.id" :ordernum="tab.orderNum" :container_id="field.id"
													:subcontainer_id="tab.id" :style="tab.style">
													<div :id="_row.id" :parent_rowid="row.id" :parent_colid="col.id"
														:container_id="field.id" :subcontainer_id="tab.id"
														:ordernum="_row.orderNum" class="drag-row drag-box"
														v-for="_row  in tab.children" :key="_row.orderNum">
														<div class="view">
															<div v-show="_row.showLabel" class="form-section-title"
																:style="_row.sectionStyle">
																{{_row.label}} <span  v-if="_row.collapse!==0&&_row.collapse!==undefined" @click="onRowCollapseClick(_row)" :class="rowCollapseIcon(_row)"></span>

															</div>
															<el-row class="row-fluid clearfix"  rowdetail="_row.id"  v-show="!_row.collapse"  :style="_row.style"
																:gutter="_row.gutter">
																<el-col :parent_rowid="row.id" :parent_colid="col.id"
																	:container_id="field.id" :subcontainer_id="tab.id"
																	:rowId="_row.id" :id="_col.id" :style="_col.style"
																	class="column container_column" :span="_col.span"
																	v-for="(_col, _col_index) in _row.children"
																	:key="_col_index">
																	<div class="online-form-item component"
																		:id="_field.id" :fieldId="_field.fieldId"
																		:parent_rowid="row.id" :parent_colid="col.id"
																		:container_id="field.id"
																		:subcontainer_id="tab.id" :colId="_col.id"
																		:rowId="_row.id" :vmodel="_field.vModel"
																		:orderNum="_field.orderNum"
																		:ctrType="_field.ctrType"
																		v-for="(_field, _field_index) in _col.children"
																		:key="_field_index">
																		<el-form-item
																			:label-width="_field.labelWidth?_field.labelWidth:'90px'"
																			v-show="_field._isShowPower">
																			<span slot="label" :style="_field.style"
																				v-show="_field.showLabel">
																				<span v-html="_field.label"></span> <em
																					class="red"
																					v-if="_field._isRequired">*</em>
																			</span>
																			<f2bpm-onlineformitem
																				v-if="!_field.isContainer&&_field.ctrType!='extend_tabs'&&_field.ctrType!='extend_container'"
																				:parentdata="data" :field="_field"
																				:fieldvalue="data[_field.vModel]"
																				@rendercomponent="renderComponent"
																				@updatevalue="updateFieldValue"
																				@appendfieldvalue="appendFieldValue">
																			</f2bpm-onlineformitem>
																		</el-form-item>
																	</div>
																</el-col>
															</el-row>
														</div>
													</div>
												</div>
											</el-container>
											<div class="table-container-div" v-else-if="field.ctrType=='extend_table'">
												<div :style="field.sectionStyle" v-show="field.showLabel"><span
														v-html="field.label"></span></div>
												<table id="field.id"
													:style="'border-collapse: collapse;width:'+field.tableWidth+';'+field.style">
													<tr :style="'height:'+field.rowHeight+'px;'+tr.style"
														v-for="tr in field.children" :rowid="row.id" :colid="col.id"
														:container_id="field.id" :subcontainer_id="tr.id">
														<td :style="getColWidths(field,tdIndex)+field.cellStyle"
															v-for="(td,tdIndex) in tr.children" class="container"
															:rowid="row.id" :colid="col.id" :container_id="field.id"
															:subcontainer_id="tr.id" :sub2container_id="td.id">
															<div v-for="_row in td.children" :id="_row.id"
																:key="_row.orderNum" :parent_rowid="row.id"
																:parent_colid="col.id" :container_id="field.id"
																:subcontainer_id="tr.id" :sub2container_id="td.id"
																:ordernum="_row.orderNum" class="drag-row drag-box">
																<div v-show="_row.showLabel" class="form-section-title"
																	:style="_row.sectionStyle">{{ _row.label }}</div>
																<el-row class="row-fluid clearfix" :style="_row.style"
																	:gutter="_row.gutter">
																	<el-col :id="_col.id"
																		v-for="(_col, _col_index) in _row.children"
																		:parent_rowid="row.id" :parent_colid="col.id"
																		:key="_col_index" :container_id="field.id"
																		:subcontainer_id="tr.id"
																		:sub2container_id="td.id" :rowid="_row.id"
																		:style="_col.style"
																		class="column container_column"
																		:span="_col.span">
																		<div :id="_field.id"
																			class="online-form-item component"
																			:fieldId="_field.fieldId"
																			:parent_rowid="row.id"
																			:parent_colid="col.id"
																			:container_id="field.id"
																			:subcontainer_id="tr.id"
																			:sub2container_id="td.id"
																			v-for="(_field, _field_index) in _col.children"
																			:colId="_col.id" :key="_field_index"
																			:rowId="_row.id" :vmodel="_field.vModel"
																			:orderNum="_field.orderNum"
																			:ctrType="_field.ctrType">
																			<el-form-item v-show="_field._isShowPower"
																				:label-width="_field.labelWidth?_field.labelWidth:'90px'">
																				<span v-show="_field.showLabel"
																					slot="label" :style="_field.style">
																					<span v-html="_field.label" />
																					<span
																						v-if="_field.helperArticle!=''&&_field.helperArticle!=undefined"
																						class="fa fa-question-circle-o"
																						title="点击查看说明" />
																					{{ _field.labelSuffix }}
																				</span>
																				<f2bpm-onlineformitem
																					v-if="!_field.isContainer&&_field.ctrType!='extend_tabs'&&_field.ctrType!='extend_container'"
																					:parentdata="data"
																					:field="_field" />
																			</el-form-item>
																		</div>
																	</el-col>
																</el-row>
															</div>
														</td>
													</tr>
												</table>
											</div>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-form>
			</div>
		</div>
		<div>
			<!--审核菜单 -->
			<f2bpm-approval-action :approData="approData" @updateapproalaction="updateapproalaction">
			</f2bpm-approval-action>
		</div>
		<div style="text-align: center;text-line:40px;  height: 49px;line-height: 48px;border: 1px solid #DEDEDE;">
			<div class="fl" style="padding-left: 5px; ">
				<el-button-group class="fl-wf-button">
					<el-button v-if="((pageBaseInfo.buttons.length<=3)||(pageBaseInfo.buttons.length>3&&num<=1))"
						v-for="(btn,num) in pageBaseInfo.buttons" type="button" :type="btn.btnType" size="small"
						v-show="btn.actionName=='send' && isSaveBut"
						:id="btn.actionName" @click="buttonAction(btn)"><i :class="'fa '+btn.icon"></i><span
							v-html="btn.buttonName"></span>
					</el-button>
					<el-button v-if="((pageBaseInfo.buttons.length<=3)||(pageBaseInfo.buttons.length>3&&num<=1))"
						v-for="(btn,num) in pageBaseInfo.buttons" type="button" :type="btn.btnType" size="small"
						v-show="btn.actionName!='send'"
						:id="btn.actionName" @click="buttonAction(btn)"><i :class="'fa '+btn.icon"></i><span
							v-html="btn.buttonName"></span>
					</el-button>
					<el-button v-if="iscustBut && stepNum > 1" type="primary" size="small" @click="buttonAction('upStep')">上一步</el-button>
					<el-button v-if="iscustBut && stepNum < 4" type="primary" size="small" @click="buttonAction('nextStep')">下一步</el-button>
					<el-button v-if="pageBaseInfo.buttons.length>3" type="primary" size="small"
						@click="openmoreActionBtn">更多操作</el-button>
				</el-button-group>
				<uni-popup ref="popup" type="bottom" style="z-index: 300;">
					<div style="background-color: #F0F0F0;height: 60px;line-height: 60px;">
						<el-button-group>
							<el-button v-if="pageBaseInfo.buttons.length>3&&num>1"
								v-for="(btn,num)  in pageBaseInfo.buttons" type="button" :type="btn.btnType"
								size="small" :id="btn.actionName" @click="buttonAction(btn)"><i
									:class="'fa '+btn.icon"></i><span v-html="btn.buttonName"></span>
							</el-button>
						</el-button-group>
					</div>
				</uni-popup>
			</div>
			<div class="fr" style="padding-right: 20rpx;" v-if="!iscustBut">
				<span class="el-dropdown-link" @click="openRightMoreButtonDraw">
					查看更多<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
			</div>
		</div>
		<unidrawer ref="rightMoreButtonDraw" :mask="true" :width="150" mode='right'>
			<view style="padding-left:20px;line-height: 40px;padding-top: 50px; ">
				<view @click="morebuttonAction('showWorkflowMapTimeline')"><span class="fa fa-picture-o"></span>办理过程
				</view>
				<!-- <view @click="morebuttonAction('showApprovalHistory')"><span class="fa fa-pencil"></span>办理过程</view> -->
				<view @click="morebuttonAction('showCirculatedHistory')"><span class="fa fa-bars"></span>传阅过程</view>
				<view @click="morebuttonAction('showCommentrecordlist')"><span class="fa fa-comment-o"></span>流程评论
				</view>
				<view @click="morebuttonAction('showWorkflowMap')"><span class="fa fa-picture-o"></span>流程图轨迹</view>
			</view>
			<view class="draw-out-bar" @click="closeRightMoreButtonDraw()"><i class="fa fa-sign-out"></i>关闭</view>
		</unidrawer>

		<el-drawer size="330px" :title="drawerTitle" :visible.sync="drawer" :direction="direction">
			<div id="comment-drawer" style="overflow: auto; ">
				<div d="talk-drawer-content">
					<div v-for="(item,index) in commentData.data">
						<div class="talk-message-container">
							<div class="user-information">
								<div>
									<span class="talk-logo-firstName" v-html="getFirstName(item.creator)"></span>
								</div>
								<div class="username">{{item.creatorId==wfContext.UserId?'我':item.creator}}</div>
								<div class="time"> {{item.createdTime}}</div>
							</div>
							<div class="talk-msg">{{item.message}}</div>
						</div>
					</div>
				</div>
				<div class="drawer-footer">
					<div class="talk-send-message-container">
						<div>
							<el-input v-model="commentData.content" type="textarea" :rows="4" placeholder="输入评论内容" />
						</div>
						<div style="height:30px;">
							<span class="fl font12">当前共{{commentData.total}}条</span> <span class="talk-send-button"
								@click="sendComment"><i class="fa fa-share"></i>发送</span>
						</div>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>
<script>
	import f2bpmApprovalAction from '../../components/onlineForm/f2bpm-approval-action.vue'
	import unidrawer from "@/components/uni-drawer/uni-drawer.vue"
	export default {
		components: {
			unidrawer,
			f2bpmApprovalAction
		},
		onLoad: function(option) {
			var that = this;
			var success = that.$store.getters.validateLogin;
			if (!success) {
				FUI.Window.showMsg("您未登录")
				return false;
			}

			that.appId = option.appId || "";
			that.wiid = option.wiid || "";
			that.wid = option.wid || "";
			that.taskId = option.taskId || "";
			that.formAction = option.formAction || "";
		},
		// onPullDownRefresh: function() {
		// 	//下拉刷新,因为不使用浏览器的滚动条会误刷新
		// 	var that = this;
		// 	window.location.reload();
		// 	uni.stopPullDownRefresh();
		// },
		mounted: function() {
			var that = this;

			that.$nextTick(function() {
				//这里是在子组件全部执行完后才触发 ，确保子组件也挂载完毕
				f2grid_global_mainVueLoadComplated = true;
				//加载表单的动态脚本
				if (that.jscript) {
					let script = document.createElement('script')
					script.type = 'text/javascript'
					script.text =
						`
	          console.info('========加载表单动态脚本==========');
	            //========加载表单动态脚本==========
	            ${that.jscript}
	          `;
					document.getElementsByTagName('head')[0].appendChild(script);
					if (Object.toIsExitsFunction("extend_fuiOnPageLoad")) {
						//执行迁移条件
						window.extend_fuiOnPageLoad();
					}

				}
			});
			//$("#talk-drawer-content").height($(window).height()-200);

			//$("body").css("overflow", "hidden");
			$("#page").height($(window).height());
			$(window).resize(function() {
				$("#page").height($(window).height());

			});
			uni.setNavigationBarTitle({
				title: that.wfContext.WorkflowTitle
			});
		},
		computed: {
			isHaveShowPower() {
				return function(field) {
					return FUI.F2Grid.isHaveShowPower(field.vModel);
				}
			},
			getFirstName() {
				return function(userFullName) {
					return userFullName.substr(0, 1);
				}
			},
			getColWidths() {
				return function(field, colIndex) {
					var item = field.colWidths.find(a => a.colnum == (colIndex + 1));
					if (item != null && item.width != "") {
						return "width:" + item.width + ";";
					}
					return "";
				};
			},
			rowCollapseIcon() {
				return function(row) {
				  var icon = row.collapse == true ? 'el-icon-arrow-down' : 'el-icon-arrow-up';
					return 'onlineform-row-collapse-button ' + icon;
				};
			}
		},
		beforeCreate: function() {
			var that = this;
			//获取到data
			//var data = that.$options.data();
		},

		created: function() {
			var that = this;
			window.myvm = this;
			// FUI.Window.showMsg("layui层弹出")
			if (formAction > 2) {
				that.isReadOnly = true;
				that.workflowTitleIsDisabled = true;
			}
			let deviceInfo = uni.getSystemInfoSync();
			that.windowHeight = deviceInfo.windowHeight-50;
			that.$myObject.toAjaxJson("/workflow/workflowform/", "getIndexJson", {
				appId: that.appId,
				wiid: that.wiid,
				wid: that.wid,
				taskId: that.taskId,
				formAction: that.formAction,
				isMobile: 1
			}, function(indexJson) {
				
			that.indexJson = indexJson;
			that.pageBaseInfo = indexJson.pageBaseInfo;
			that.wfContext = indexJson.JSWorkflowContext;
			that.wfContext.formRightJson = indexJson.FormRightJson;
			if (that.wfContext.WorkflowformAction == 0) {
				that.wid = that.wfContext.WorkflowId;
			}
			//审核菜单
			if (that.pageBaseInfo.approData && that.pageBaseInfo.approData.length > 0) {
				that.approData = that.pageBaseInfo.approData;
				console.info(that.approData)
			}
			//将权限数组转为对象
			$.each(that.wfContext.formRightJson, function(index, item) {
				var name = item.name;
				that.wfContext.formRightJson[name] = item;
			});
			WFContext = that.wfContext;
			that.taskState = WFContext.TaskState;
			that.taskIsValid = WFContext.TaskIsValid;
			that.taskValid();
			$("title").html("表单-" + that.wfContext.WorkflowTitle);
			if (that.wfContext.CurrentIsModifyProcInstTitle != true && WFContext.CurrentActivityType != "Start") {
				that.workflowTitleIsDisabled = true;
			}
			if (that.wfContext.FormType == 'OnlineForm') {
				that.initailOnlineForm();
			}
			if (that.wfContext.FormType == 'UrlForm') {
				that.initailUrlForm();
			}
			});
			//加载页面Model数据
			/* var indexJson = that.$myObject.toAjaxJson("/bpmway/workflow/workflowform/", "getIndexJson", {
				appId: that.appId,
				wiid: that.wiid,
				wid: that.wid,
				taskId: that.taskId,
				formAction: that.formAction,
				isMobile: 1
			}) */
			

			// var onLineFormData = that.indexJson.OnlineFormHtml.busObjectDataJson;
			// //加载表单模板渲染
			// that.designerJson = that.indexJson.OnlineFormHtml;
			// that.formProperty = that.designerJson.formProperty;
			// if (that.designerJson.htmlfields) {
			// 	that.fields = that.designerJson.htmlfields;
			// 	that.jscript = that.designerJson.jscript;
			// }
			// //收集字段定义（纯字段扁平化）
			// FUI.F2Grid.collectField(that, that.fields);
			// //收集被公式引用到的字段名
			// that.mathFieldList = FUI.F2Grid.getMathFieldList(that.fieldList);

			// if (that.fields && that.fields.length > 0) {
			// 	//初始化data的结构
			// 	FUI.F2Grid.initailData(that, that.fields);
			// 	var busObjectDataJson = that.designerJson.busObjectDataJson;
			// 	onLineFormData = busObjectDataJson;
			// 	that.onLineFormData = onLineFormData;
			// } else {
			// 	that.fields = [];
			// }

			// if (that.wfContext.FormType == 'OnlineForm') {
			// 	//在线表单数据
			// 	console.info("在线表单数据")
			// 	console.info(onLineFormData)
			// 	that.loadOnlineFormData(onLineFormData);
			// }
		},
		data() {
			return {
				isSaveBut: true,//是否显示提交按钮
				stepNum: 0,//页面当前步骤
				iscustBut: false,
				windowHeight: '',
				//审核菜单
				approAction: '',
				approData: [],
				workflowTitleIsDisabled: false,
				isReadOnly: false,
				//子表组件的Key
				subtableKey: "101",
				//url参数
				appId: "",
				wiid: "",
				wid: "",
				taskId: "",
				taskState: 0,
				taskIsValid: 1,
				formAction: null,
				//页面流程数据
				indexJson: null,
				//流程上下文
				wfContext: {},
				//在线表单业务数据
				onLineFormData: [],
				//基础展示信息
				pageBaseInfo: {
					buttons: [],
					workflowTitle: ""
				},
				//表单应用设计JSON
				designerJson: {},
				//Html渲染的字段域
				fields: [],
				// 被公式引用到的字段,key为字段名，value为多个数组公式
				mathFieldList: {},
				//数组扁平化的字段定义
				fieldList: [],
				//扁平化的字段定义
				fieldsDef: {},
				jscript: "",
				//url表单
				urlForm: {},
				formProperty: {},
				//流程自己的数据，比如表单内的审批意见
				workflowformData: {
					hidOpinion: ""
				}
				//表单字段数据
				,
				data: {}
				//评论抽屉
				,
				drawerTitle: '流程评论',
				drawerContent: '',
				drawer: false,
				direction: 'rtl',
				commentData: {
					content: "",
					total: 0,
					data: []
				},
				importanceData: [],
				urgencyData: [],
				configTypeArray: [{
							dataField: 'importanceData',
							configType: '流程配置_重要级别',
							flag: ''
						},
						{
							dataField: 'urgencyData',
							configType: '流程配置_紧急程度',
							flag: ''
						}
					]
					//stand:表单校验规则
					,
				formRules: {
					"kj.wenBenYu": [{
							required: true,
							message: '必填项不能为空'
						}
						//{validator: FUI.Validator.onlyBigEnglisthChar},
					],
					opinionContent: [{
						required: true,
						message: '必填项不能为空'
					}]
				}
			};
		},
		methods: {
			//初始Url表单
			initailUrlForm() {
				var that = this;
				var htmlfields = that.indexJson.OnlineFormHtml.htmlfields;
				var urlParmsStr = window.location.search.substr(1);
				var url = htmlfields.url;
				//将浏览器的Url参数拼接进去
				if (urlParmsStr) {
					var theChar = url.indexOf("?") > -1 ? "&" : "?";
					url = url + theChar + urlParmsStr;
				}
				let state= that.indexJson.JSWorkflowContext.WorkflowInstinceState;
				if((htmlfields.url=="/workspaces/views/application/travelApplication"||htmlfields.url=="/workspaces/views/application/travelChange") && (state == 0 ||state == 1||state == 5)){
					this.iscustBut= true;
					this.isSaveBut= false;
				}
				that.urlForm = htmlfields;
				that.urlForm.url = url;
			}
			//初始化在线表单设计
			,
			initailOnlineForm() {
				var that = this;
				var onLineFormData = that.indexJson.OnlineFormHtml.busObjectDataJson;
				// 加载表单模板渲染
				that.designerJson = that.indexJson.OnlineFormHtml;
				that.formProperty = that.designerJson.formProperty || {};
				if (that.designerJson.htmlfields) {
					that.fields = that.designerJson.htmlfields;
					that.jscript = that.designerJson.jscript;
				}
				// 收集字段定义（纯字段扁平化,修改字段必填标记）
				FUI.F2Grid.collectField(that, that.fields);
				// 收集被公式引用到的字段名
				that.mathFieldList = FUI.F2Grid.getMathFieldList(that.fieldList);
				if (that.fields && that.fields.length > 0) {
					// 初始化data的结构
					FUI.F2Grid.initailData(that, that.fields);
					var busObjectDataJson = that.designerJson.busObjectDataJson;
					onLineFormData = busObjectDataJson;
					that.onLineFormData = onLineFormData;
				} else {
					that.fields = [];
				}
				// 在线表单数据
				that.loadOnlineFormData(onLineFormData);
			},
			loadOnlineFormData(onLineFormData) {
				var that = this;
				if (WFContext.WorkflowformAction != 0 &&
					onLineFormData.length > 0 && onLineFormData != undefined &&
					onLineFormData != null && onLineFormData[0].data != null &&
					onLineFormData[0].data != undefined) {
					try {
						FUI.F2Grid.load(that, onLineFormData);
					} catch (err) {
						console.info(err);
						FUI.Window.showMsg("表单数据获取失败，请联系管理员！");
					}
				} else {
					// FUI.F2Grid.bindAllMainTableMathEvent();
					// FUI.F2Grid.doSomething();
				}
			},
			commentDelete(id) {
				var that = this;
				var res = Object.toAjaxJson(FUI.Handlers.WorkflowBusinessHandler, "commentDelete", {
					keyId: id
				});
				if (res.success) {
					that.loadComment();
				} else {
					FUI.Window.showMsg(res.msg);
				}
			},
			sendComment() {
				var that = this;
				if (that.commentData.content == "") {
					FUI.Window.showMsg2(null, "请填写评论内容");
					return false;
				}
				var parm = {
					formAction: "Add",
					WorkflowInstanceId: that.wiid,
					message: that.commentData.content
				}
				var res = Object.toAjaxJson(FUI.Handlers.WorkflowBusinessHandler, "saveComment", parm);
				if (res.success) {
					that.commentData.content = "";
					that.loadComment();
				}
			},
			loadComment() {
				var that = this;
				var parm = {}
				parm.wiid = that.wiid;
				parm.page = 1;
				parm.rows = 10000;
				parm.sort = "createdTime";
				parm.order = "asc";
				var res = Object.toAjaxJson(FUI.Handlers.WorkflowBusinessHandler, 'loadProcessInstanceComment', parm, true,
					null,
					function(res) {
						if (res.success) {
							that.commentData.data = res.rows;
							that.commentData.total = res.total;
						} else {
							FUI.Window.showMsg(that, res.msg);
						}
					});
			},
			validateForm(refFormName) {
				//stand:表单校验
				var success = false;
				this.$refs[refFormName].validate(valid => {
					success = valid;
				});
				return success;
			},
			taskValid() {
				var that = this;
				//任务有效性检查 4待阅 2待办
				if (that.formAction != 0 && (that.formAction <= 2 || that.formAction == 4)) {
					if (WFContext.TaskState == 2 || WFContext.TaskState == 99 || WFContext.TaskIsValid == false) {
						FUI.Window.showMsg(null, "当前任务已失效，任务可能已被处理", null, null, function() {
							if (window.opener != null) {
								//FUI.Window.ngto(__webpath + "/workflow/businessMP/todoList", true);
								uni.reLaunch({
									url: '/workspaces/views/order'
								});
							} else {
								//FUI.Window.ngto(__webpath + "/workflow/businessMP/todoList", true)
								uni.reLaunch({
									url: '/workspaces/views/order'
								});
							}
						});
					}
				}
			},
			openmoreActionBtn() {
				var that = this;
				that.$refs.popup.open();

			}
			//按钮动作
			,
			buttonAction(butItem) {
				var that = this;
				that.$refs.popup.close();
				if (butItem.actionName) {
					var fun = butItem.actionName;
					if (that[fun]) {
						var fn = that[fun];
						fn(butItem);
					} else {
						switch (butItem.actionName) {
							case "flowmap": {
								showWorkflowMap(butItem.beforeFn);
							}
							break;
						case "print": {
							//printTable(butItem.beforeFn);
							printExcelTable(butItem.beforeFn, that.wfContext.FormId, that.wfContext.WorkflowInstanceId)
						};
						break;
						case "approvalHistory": {
							showHistoryApproval(butItem.beforeFn);
						};
						break;
						case "showCirculatedHistory": {
							showCirculatedHistory(butItem.beforeFn);
						};
						break;
						case "taskCommunication": {
							openSendNextTaskCommunication(butItem.beforeFn);
						};
						break;
						case "complateTaskCommunication": {
							openComplateTaskCommunicationDialog();
						};
						break;
						case "taskCommunicationList": {
							showHistoryTaskCommunication(butItem.beforeFn);
						};
						break;
						case "send": {
						    //如果有则调用前置事件的扩展
							if (Object.toIsExitsFunction("extend_sendWorkflowForm_before")) {
							  var isExtendValidatePass = extend_sendWorkflowForm_before();
							  if (isExtendValidatePass == false) {
								return;
							  }
							}
							if (that.wfContext.FormType == 'UrlForm') {
								submitUrlFormMethod(that, butItem, "validateWorkflowForm", function(resultMsg){
									if (typeof resultMsg == "boolean" && resultMsg === false) {
										return false;
									} else if (typeof resultMsg == "string" && resultMsg != "") {
										FUI.Window.showMsg(resultMsg);
										return false;
									}
									openSendDialog(that, butItem.beforeFn, butItem);
								});
							} else {
								var success = that.validateForm('formRef');
								if (!success) return;
								openSendDialog(that, butItem.beforeFn, butItem);
							}
						};
						break;
						case "invalid": {
							invalidWorkflow(that, butItem.beforeFn);
						};
						break;
						case "taskclaim": {
							taskclaim(that, butItem.beforeFn);
						};
						break;
						case "sendCirculated": {
							openCirculatedActor(that, butItem.beforeFn);
						}
						break;
						case "setDoneCirculated": {
							setDoneCirculated(that, butItem.beforeFn);
						}
						break;
						case "sendReferred": {
							openReferredActor(that, butItem.beforeFn);
						};
						break;
						case "reject": {
							openRejectActorSelected(that, butItem.beforeFn);
						};
						break;
						case "comment": {
							that.openComment(butItem);
						};
						break;
						}
					}
				} else if( butItem == "upStep"){
					submitUrlFormMethod(that, butItem, "upStep", function(step){
						if(step) that.stepNum= step;
						that.isSaveBut= false;
					});
				} else if( butItem == "nextStep"){
					submitUrlFormMethod(that, butItem, "nextStep", function(step){
						if(step) that.stepNum= step;
						if(step > 3) that.isSaveBut= true;
					});
				}
			},
			openRightMoreButtonDraw() {
				var that = this;
				that.$refs.rightMoreButtonDraw.open();
			},
			closeRightMoreButtonDraw() {
				var that = this;
				that.$refs.rightMoreButtonDraw.close();
			},
			morebuttonAction(code) {
				var that = this;
				that.closeRightMoreButtonDraw();
				if (code == "showApprovalHistory") {
					var url = __webpath + "/workflow/businessMP/showApprovalHistory?wiid=" + that.wiid;
					var title = "查看办理过程：";
				} else if (code == "showCirculatedHistory") {
					var url = __webpath + "/workflow/businessMP/showCirculatedHistory?wiid=" + that.wiid;
					var title = "查看传阅记录：";
				} else if (code == "showCommentrecordlist") {
					var url = __webpath + "/workflow/businessMP/showCommentrecordlist?wiid=" + that.wiid;
					var title = "查看流程评论：";
				} else if (code == "showWorkflowMap") {
					that.showWorkflowMap();
					return false;
				} else if (code == "showWorkflowMapTimeline") {
					that.showWorkflowMapTimeline();
					return false;
				}
				FUI.Window.openEdit(url, title, null, null, null, null, null, null, null, true);
			},
			showWorkflowMapTimeline() {
				var that = this;
				var url = __webpath + "/workflow/businessMP/workflowMapTimeline?wid=" + that.wid + "&wiid=" + that.wiid;
				var title = "过程时间线：";
				FUI.Window.openEdit(url, title, null, null, null, null, null, null, null, true);

			},
			showWorkflowMap() {
				var that = this;
				var url = __webpath + "/workflow/businessMP/workflowMap?wid=" + that.wid + "&wiid=" + that.wiid;
				var title = "查看流程图：";
				FUI.Window.openEdit(url, title, null, null, null, null, null, null, null, true);
			}
			//===stand:标准化方法============
			,
			closeEdit() {
				//stand:关闭编辑窗口
				FUI.Window.closeEdit();
			}
			//===stand:标准化方法结束============
			,
			loadData() {
				var that = this;
				if (formAction != FUI.FormAction.Add) {
					FUI.Form.bindDataToForm(that, FUI.Handlers.FuiFrameworkHandler, FUI.Method.AutoGetViewModelMethod,
						keyId, null,
						mainTable);
				}
			},
			save(butItem) {
				var that = this;
				//如果有则调用前置事件的扩展
				if (Object.toIsExitsFunction("extend_saveWorkflowForm_before")) {
				  var isExtendValidatePass = extend_saveWorkflowForm_before();
				  if (isExtendValidatePass == false) {
					return;
				  }
				}
				var beforeFn = butItem.beforeFn;
				if (that.wfContext.FormType == 'UrlForm') {
					submitUrlFormMethod(that, butItem, "validateWorkflowForm", function(resultMsg){
						if (typeof resultMsg == "boolean" && resultMsg === false) {
							return false;
						} else if (typeof resultMsg == "string" && resultMsg != "") {
							FUI.Window.showMsg(resultMsg);
							return false;
						}
						saveWorkflow(that, false, beforeFn, butItem)
					});
				} else {
					var success = that.validateForm('formRef', true)
					if (!success) return false;
					saveWorkflow(that, false, beforeFn, butItem)
				}
			},
			validateForm(refFormName, isNotToCheckTheEmptyValue) {
				var that = this;
				richeditorArrValueToInput(that);
				 //如果有则调用前置事件的扩展
				if (Object.toIsExitsFunction("extend_validateWorkflowForm_before")) {
				  var isExtendValidatePass = extend_validateWorkflowForm_before();
				  if (isExtendValidatePass == false) {
					return;
				  }
				}
				var success = isNotToCheckTheEmptyValue ? FUI.validate(that.fieldsDef, that.data, null, true) : FUI
					.validate(that.fieldsDef, that.data);
				return success;
			},
			openHelperArticle(articleCode) {
				var url = __webpath + "/workflow/security/article/articleView?code=" + articleCode;
				FUI.Window.openEdit(url, "查看帮助", "View", null, null, null, null, null, null, true);
			},
			toPinYin(sourceField, targetField) {
				if (!this.data[targetField]) {
					let source = this.data[sourceField];
					this.data[targetField] = Object.toPinYin(source);
				}
			},
			updateWorkflowformData(propertyName, newValue) {
				var that = this;
				that.workflowformData[propertyName] = newValue;
			},
			openComment(butItem) {
				var that = this;

				that.loadComment();
				that.drawer = true;
				that.drawerTitle = "查看评论记录";
			},
			uploadWorkflowAttachment() {
				var that = this;
				if (that.wfContext.WorkflowformAction == WF.WorkflowformAction.Todo) {
					var url = __webpath + "/workflow/pageRoute/attachmentUpload/?bk=" + that.wfContext.WorkflowInstanceId +
						"&AttachmentType=Workflow&ActivityName=" + that.wfContext.CurrentActivityName + "&ActivityId=" +
						that.wfContext.CurrentActivityId;
					FUI.Window.openEdit(url, "上传流程附件", "Add", "AttachmentsGrid", 600, 450);
				} else {
					FUI.Window.showMsg("当前不是您待办事项，不能上传附近");
				}
				return false;
			},
			updateapproalaction(value) {
				var that = this;
				that.approAction = value;
			}
			//===========================表单数据相关=====================
			//重新渲染指定的组件
			,
			renderComponent(keyName) {
				var that = this;
				that.subtableKey = Object.toGetRandomNum(100, 2000);
				//that.subtableKey=that.subtableKey+1;
				//that[keyName]=that[keyName]+1;
			}
			//field: 可以是字段名也可以是字段定义的对象
			,
			updateFieldValue(field, newValue, vueDataName, subVueDataName) {
				//更新自己控件值
				var that = this;
				var vueDataObj = vueDataName ? that[vueDataName] : that.data;
				if (subVueDataName) {
					vueDataObj = that[vueDataName][subVueDataName];
				}
				if (typeof field == "string") {
					vueDataObj[field] = newValue;
				} else {
					if (field.vModel) {
						vueDataObj[field.vModel] = newValue;
					} else if (field["field"]) {
						vueDataObj[field["field"]] = newValue;
					}
				}
			},
			appendFieldValue(fieldName, newValue, vueDataName, subVueDataName) {
				//追加值到指定字段
				var that = this;
				var vueDataObj = vueDataName ? that[vueDataName] : that.data;
				if (subVueDataName) {
					vueDataObj = that[vueDataName][subVueDataName];
				}
				var oleValue = vueDataObj[fieldName] || "";
				if (oleValue) {
					vueDataObj[fieldName] = oleValue + "," + newValue;
				}
				vueDataObj[fieldName] = newValue;
			}
			// 扩展事件
			,
			extendTabtoolbarClick(field) {
				console.info(field.label);
				event.stopPropagation();
				event.preventDefault();
			},
			extendButtonClidk(field) {
				//console.info(field.label);
				//console.info(field.clickEventName);
				event.stopPropagation();
				event.preventDefault();
			},
			openComment(butItem) {
				var that = this;
				that.loadComment();
				that.drawer = true;
				that.drawerTitle = "流程评论";
			},
			commentDelete(id) {
				var that = this;
				var res = Object.toAjaxJson(FUI.Handlers.WorkflowBusinessHandler, "commentDelete", {
					keyId: id
				});
				if (res.success) {
					that.loadComment();
				} else {
					FUI.Window.showMsg(res.msg);
				}
			},
			sendComment() {
				var that = this;
				if (that.commentData.content == "") {
					FUI.Window.showMsg2(null, "请填写评论内容");
					return false;
				}
				var parm = {
					formAction: "Add",
					WorkflowInstanceId: that.wiid,
					message: that.commentData.content
				}
				var res = Object.toAjaxJson(FUI.Handlers.WorkflowBusinessHandler, "saveComment", parm);
				if (res.success) {
					that.commentData.content = "";
					that.loadComment();
				}
			},
			loadComment() {
				var that = this;
				var parm = {}
				parm.wiid = that.wiid;
				parm.page = 1;
				parm.rows = 10000;
				parm.sort = "createdTime";
				parm.order = "asc";
				var res = Object.toAjaxJson(FUI.Handlers.WorkflowBusinessHandler, 'loadProcessInstanceComment', parm, true,
					null,
					function(res) {
						if (res.success) {
							that.commentData.data = res.rows;
							that.commentData.total = res.total;
						} else {
							FUI.Window.showMsg(that, res.msg);
						}
					});
			},
			onRowCollapseClick(row) {
				var that = this;
				if (row.collapse == undefined) {
					row.collapse = false;
				} else {
					row.collapse = !row.collapse;
				}
				event.stopPropagation();
				event.preventDefault();
			}
		}
	}
</script>
</script>

<style>
	/* 	@import url("@/static/css/workflowform.css");
	@import url("@/static/f2bpmUI/onlineForm/onlinedisginer.css"); */
	.draw-out-bar {
		background: #f9f9f9;
		height: 38px;
		width: 100%;
		font-size: 14px;
		color: #a0a0a0;
		text-align: center;
		line-height: 38px;
		border-top: 1px solid #e1e1e1;
		cursor: pointer;
		position: absolute;
		bottom: 0px;
	}

	/**************评论对话互动样式****************/

	.talk-message-container {
		padding: 10px;
	}

	.talk-message-container .user-image {
		width: 22px;
		height: 22px;
		margin-right: 12px;
		border-radius: 12px;
	}

	.talk-message-container .user-information {
		display: flex;
		align-items: center;
	}

	.talk-message-container .user-information .time {
		padding-left: 10px;
		padding-bottom: 5px;
		color: #c3c3c3;
	}

	.talk-message-container .user-information .username {
		padding-bottom: 5px;
	}

	.talk-message-container .talk-msg {
		padding: 8px 12px;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		max-width: 300px;
		background: #8698e9;
		border-radius: 0 10px 10px 10px;
		font-family: inherit;
		font-size: 14px;
		color: #ffffff;
		margin-left: 30px;
		white-space: pre-line;
		word-break: break-word;
	}

	.talk-send-message-container {
		background: #FFFFFF;
		padding: 10px;
	}

	.talk-send-button {
		float: right;
		color: #ffa80d;
		cursor: pointer;
		border: 1px solid #DDDDDD;
		padding: 5px;
		border-radius: 4px;
		margin-top: 3px;
	}

	.el-drawer.rtl {
		overflow: scroll
	}

	.talk-logo-firstName {
		display: inline-block;
		background-color: #978DF1;
		color: #FFFFFF;
		font-size: 13px;
		width: 50rpx;
		height: 50rpx;
		line-height: 58rpx;
		text-align: center;
		border-radius: 100rpx;
	}
	.fl-wf-button .el-button{
		font-size: 28rpx;
	}
</style>
